<template>
  <div v-if="heritage" class="detail-container">
    <div class="breadcrumb-wrapper">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/heritage/list' }">非遗列表</el-breadcrumb-item>
        <el-breadcrumb-item>{{ heritage.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="content-wrapper">
      <el-row :gutter="30">
        <el-col :md="12">
          <div class="image-section">
            <el-carousel 
              :interval="4000" 
              height="500px"
              indicator-position="outside"
              arrow="always"
              class="heritage-carousel"
            >
              <el-carousel-item v-for="(img, index) in heritage.images" :key="index">
                <div class="carousel-image-wrapper">
                  <img :src="img" class="carousel-image" :alt="`${heritage.name} - 图片${index + 1}`" />
                </div>
              </el-carousel-item>
            </el-carousel>
            
            <div class="thumbnail-list" v-if="heritage.images.length > 1">
              <div 
                v-for="(img, index) in heritage.images" 
                :key="index"
                class="thumbnail-item"
                @click="currentImageIndex = index"
              >
                <img :src="img" :alt="`缩略图${index + 1}`" />
              </div>
            </div>
          </div>
        </el-col>

        <el-col :md="12">
          <div class="info-section">
            <h1 class="heritage-title">{{ heritage.name }}</h1>
            
            <div class="heritage-meta">
              <el-tag size="large" type="success" class="region-tag">
                <el-icon><Location /></el-icon>
                {{ heritage.region }}
              </el-tag>
              <el-tag size="large" type="warning" class="level-tag">
                <el-icon><Star /></el-icon>
                {{ heritage.level }}
              </el-tag>
            </div>

            <el-divider />

            <div class="heritage-info">
              <h2 class="section-title">历史渊源</h2>
              <div v-html="heritage.history" class="prose"></div>

              <h2 class="section-title">传承现状</h2>
              <div v-html="heritage.currentStatus" class="prose"></div>

              <h2 class="section-title">保护措施</h2>
              <div v-html="heritage.protection" class="prose"></div>
            </div>

            <div class="action-buttons">
              <el-button 
                type="primary" 
                size="large"
                @click="showARModel"
                class="ar-button"
              >
                <el-icon><View /></el-icon>
                AR体验
              </el-button>
              
              <el-button 
                type="success" 
                size="large"
                @click="showVideo"
                class="video-button"
              >
                <el-icon><VideoPlay /></el-icon>
                观看视频
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row class="mt-8">
        <el-col :span="24">
          <div class="related-section">
            <h2 class="section-title">相关非遗项目</h2>
            <el-row :gutter="20">
              <el-col 
                v-for="item in relatedHeritage" 
                :key="item.id" 
                :xs="24" 
                :sm="12" 
                :md="8" 
                :lg="6"
              >
                <el-card 
                  class="related-card" 
                  :body-style="{ padding: '0px' }"
                  @click="navigateToHeritage(item.id)"
                >
                  <img :src="item.coverImage" class="related-image" />
                  <div class="related-info">
                    <h3>{{ item.name }}</h3>
                    <p>{{ item.region }}</p>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <ARViewer v-if="showAR" :model="heritage.arModel" @close="showAR = false" />
    
    <el-dialog
      v-model="videoDialogVisible"
      title="非遗视频展示"
      width="80%"
      class="video-dialog"
    >
      <video 
        v-if="heritage.videoUrl" 
        :src="heritage.videoUrl" 
        controls 
        class="heritage-video"
      ></video>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useHeritageStore } from '../stores/heritageStore';
import { Location, Star, View, VideoPlay } from '@element-plus/icons-vue';
import ARViewer from '../components/ARViewer.vue';

const route = useRoute();
const router = useRouter();
const heritageStore = useHeritageStore();
const heritage = ref(null);
const showAR = ref(false);
const currentImageIndex = ref(0);
const videoDialogVisible = ref(false);
const relatedHeritage = ref([]);

onMounted(async () => {
  await heritageStore.getHeritageById(route.params.id);
  heritage.value = heritageStore.currentHeritage;
  // 获取相关非遗项目
  relatedHeritage.value = await heritageStore.getRelatedHeritage(route.params.id);
});

const showARModel = () => {
  showAR.value = true;
};

const showVideo = () => {
  videoDialogVisible.value = true;
};

const navigateToHeritage = (id) => {
  router.push(`/heritage/${id}`);
};
</script>

<style scoped>
.detail-container {
  @apply min-h-screen bg-gray-50;
}

.breadcrumb-wrapper {
  @apply bg-white p-4 shadow-sm;
}

.content-wrapper {
  @apply max-w-7xl mx-auto p-6;
}

.image-section {
  @apply bg-white rounded-lg shadow-md p-4;
}

.heritage-carousel {
  @apply rounded-lg overflow-hidden;
}

.carousel-image-wrapper {
  @apply h-full w-full flex items-center justify-center bg-black;
}

.carousel-image {
  @apply h-full w-full object-contain;
}

.thumbnail-list {
  @apply flex gap-2 mt-4 overflow-x-auto pb-2;
}

.thumbnail-item {
  @apply w-20 h-20 rounded cursor-pointer overflow-hidden border-2 border-transparent hover:border-primary-500;
}

.thumbnail-item img {
  @apply w-full h-full object-cover;
}

.info-section {
  @apply bg-white rounded-lg shadow-md p-6;
}

.heritage-title {
  @apply text-3xl font-bold text-gray-800 mb-4;
}

.heritage-meta {
  @apply flex gap-3 mb-6;
}

.region-tag,
.level-tag {
  @apply flex items-center gap-1;
}

.section-title {
  @apply text-xl font-semibold text-gray-700 mb-3 mt-6;
}

.prose {
  @apply text-gray-600 leading-relaxed;
}

.action-buttons {
  @apply flex gap-4 mt-8;
}

.ar-button,
.video-button {
  @apply flex items-center gap-2;
}

.related-section {
  @apply bg-white rounded-lg shadow-md p-6;
}

.related-card {
  @apply cursor-pointer transition-transform hover:scale-105;
}

.related-image {
  @apply w-full h-48 object-cover;
}

.related-info {
  @apply p-4;
}

.related-info h3 {
  @apply text-lg font-semibold text-gray-800 mb-1;
}

.related-info p {
  @apply text-gray-600 text-sm;
}

.video-dialog {
  :deep(.el-dialog__body) {
    @apply p-0;
  }
}

.heritage-video {
  @apply w-full aspect-video;
}

:deep(.el-carousel__arrow) {
  @apply bg-black/50 hover:bg-black/70;
}

:deep(.el-carousel__indicators) {
  @apply bottom-4;
}
</style>